@red: #E51400;
@green: #339933;
@blue: #1ba1e2;
@orange: #f09609;
@lime: #8cbf26;
@teal: #00aba9;
@magenta: #ff0097;
@pink: #e671b8;
@brown: #a05000;
@purple: #a200ff;
//@grey: #dedfde;
@black: #393939;
@grey: #999;
@white: #fdfdfd;

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}



/* CSS declarations go here */
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}

// fix bootstrap css
body .modal {
  width: 70%; /* desired relative width */
  left: 15%; /* (100%-width)/2 */
  margin: auto auto auto auto; /* place center */
  &.fade.in {
    top:50px; /* fade in to correct spot */
  }
}

.nav-container {
  margin: 0 10px;
}
.navbar .text {
  float:left;
  line-height: 20px;
  padding: 5px 0px;
}

//notification-icon hovers to show dropdown-menu
.notification-list {
  .nav {
    position: relative;
    left: 0;
    display: block;
    float: left;
    margin: 0 10px 0 0;
  }
}

.ui-pnotify-history-container {
  display:none;
}

.has-unread{

  &:hover{
    .dropdown-menu{
      display: block;
      margin: 0;
    }
  }
  .dropdown-menu{
    width: 280px;
    li{
      position: relative;
      .mark-read{
        position: absolute;
        display: none;
        padding: 0;
        right: 4px;
        top:50%;
        margin-top: -8px;
        width: 17px;
        height: 17px;
        text-align: center;
        vertical-align: middle;
        .border-radius(10px);
        i{
          margin: 0;
          color: @white;
        }
      }
      &:hover{
        background: @red;
        a{
          color: @white;
        }
        .mark-read{
          display: block;
          &:hover{
            background:  darken(@red, 20%);
          }
        }
      }
      &.divider{
        background: #E5E5E5;
      }
    }
    a{
      font-size: 12px;
      white-space:normal;
    }
    .show-more{
      text-align: center;
      a{
        color: @grey;
        &:hover{
          color: @white;
        }
      }
    }
  }
}

.gridster .gs_w {
  background: @white;
  cursor: pointer;
  -webkit-box-shadow: 0 0 5px @grey;
  box-shadow: 0 0 5px @grey;
}

.spark .carousel-caption {
  position: static;
  padding: 3px;
}

// teamspark specific css

// common css
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: #ff7f7;
  p, h1 {
    position: absolute;
    top: 50%;
    left: 48%;
  }
  h1 {
    width: 300px;
    left: 40%;
    top: 40%;
    color: @white;
  }
}

.container-fluid {
  background-color: @black;
  #login-buttons, #create-team-form {
    color:@white;
    display: block;
    line-height: auto;
    position: absolute;
    top: 25%;
    left: 40%;
    width: 240px;
    h3 {text-align: center;}
    #login-dropdown-list {
      position: relative;
      top: auto;
      left: auto;
    }
  }
}

.insignificant { color: #d3d3d3; font-size: 75%; margin: 0 5px;}

.attraction {
  background-color: @black;
  color: @white;
  a:not(.btn) {
    i {color: @blue;}
    color: @white;
    &:hover {
      color:@black;
      i {color: @black;}
    }
  }
  #login-buttons {
    color: @black;
    #login-dropdown-list {
      a {color:@black;}
      input {width: 170px;}
    }
  }
  .modal {
    color: @black;
  }
}

.modal {
  form {
    label.control-label {width: 100px; margin-right: 10px;}
    .span3 label.control-label {width: 60px; margin-right: 10px;}
    textarea {width:360px;height: 200px;}
  }
}

.author {
  margin: 10px 0;
}

.mask {
  opacity: 0.2;
}

.container-fluid {
  padding: 0px;
  width: 100%;
  height: 100%;
  .stretch {
    height: 100%;
  }
}
img.avatar { width: 50px; height: 50px;}
img.avatar-medium { width: 30px; height: 30px;}
img.avatar-small {width:20px; height: 20px;}

.toolbar-bottom {
  position: absolute;
  bottom: 0px;
  width: 100%;
  .btn-group {
    width: 100%;
    > .btn, > .btn:first-child {
      width: 50%;

      -webkit-border-top-right-radius: 0px;
      border-top-right-radius: 0px;
      -webkit-border-bottom-right-radius: 0px;
      border-bottom-right-radius: 0px;
      -moz-border-radius-topright: 0px;
      -moz-border-radius-bottomright: 0px;
      -webkit-border-bottom-left-radius: 0px;
      border-bottom-left-radius: 0px;
      -webkit-border-top-left-radius: 0px;
      border-top-left-radius: 0px;
      -moz-border-radius-bottomleft: 0px;
      -moz-border-radius-topleft: 0px;
    }
  }
}
.spark-panel .toolbar-bottom .btn-group > .btn {width: 33%;}

// project panel
.project-panel {
  position: relative;
  padding-bottom: 35px;
  height: 100%;
  .nav-header {text-transform: none;}
  .project-list {
    .nav .dropdown .dropdown-toggle {
      .caret { margin-top: 14px;}
      &:hover, &:active {
        .caret {color: @white; }
        background-color: @black;
        a { color: @white;}
      }
    }
    .dropdown-menu {
      left: auto;
      right: 0px;
      .avatar-small {width: 15px; height: 15px;}
      a {
        color: @black;
        font-size: 12px;
        &:hover {color: @white;}
      }
    }
  }

  .child {margin-left: 10px;}
  .nav-list {
    list-style: none;
    height: 100%;
    overflow-y: auto;
    .nav-header {
      font-size: 16px; line-height: 32px;
      > .btn-group {
        margin: 0px;
        font-size: 8px;
        .btn-small {padding: 2px 2px;}
      }
    }
  }
}

#select-project {
  width: 100%;
  color: @black;
//  .border-radius(0px);
}

li.sub {padding-left: 10px;}

// spark panel
.spark-panel {
  position: relative;
  padding: 70px 5px 20px 5px;

  background: url(/img/lightbg.png) repeat top left;
  > header {
    position: relative;
    top: -70px;
    h4 { text-align: center;}
  }
  > .spark-controls {
    position: relative;
    top: -70px;
  }
  .navbar {
    .navbar-inner {min-height:30px;}
    .nav-collapse > .nav > li {
      > a {
        padding: 5px 6px;
      }
      &:hover, &:active {
        color: @white;
        background-color: @blue;
        > a {
          color: @white;
        }
      }
    }
  }
  .sparks {
    position: relative;
    top: -80px;
    overflow-y: auto;
    height: 100%;
  }
}
.spark-search-item {
  padding-bottom: 5px;
  .avatar {margin-right: 10px;}
  .title {margin: 2px; }
  .created { margin: 2px; font-size: 12px; color: #d3d3d3;}
  .content {font-size: 10px; }
  .label {margin: 1px;}
  &.new {text-align: right;}
}
.spark {
  &.finished {
    opacity: 0.85;
  }
  div.avatar {
    float: left;
    p {padding: 20px 15px 0px 15px;}
    i {font-size: 24px; width: 24px; text-align: center; color: @blue;}
    i.urgent {color: @magenta;}
    i.important {color: @orange;}
    i.urgent.important {color:@red;}
  }
  .spark-container {
    //background-color: @white;
    padding: 10px;
    margin-left: 60px;
    clear: right;
    .nav {
      &.spark-toolbox {
        font-size: 20px;
        a:hover {background: none; background-color: none;}
      }
      margin: 0px;
      li {
        display: inline;
        >a {display: inline;}
        &.supported i {color: @red;}
        i:hover {color: @red; }
      }

    }
    .title {
      h5 { margin: 0px; line-height: 14px;}
      p { margin: 2px 0px; font-size: 12px;}

    }
    .content {
      background-color: @white;
    }
    .modal-header {
      .small {font-size: 14px; font-weight: normal;}
      ul {
        vertical-align: middle;
        margin: 0 0 0 5px;
        display: inline-block;
        list-style: none;
        li {float: left; margin: 0 2px; }
      }
    }
    .modal-body {
      max-height: none;
    }
    .modal-footer {
      text-align: left;
      .owners, .finishers {
        ul {display: inline-block; margin: 0 0 0 5px;}
        li {
          &:after {content: '>'; margin: 0 3px;}
          &:last-child:after {content: ''; margin: 0px;}
          &.active {
            opacity: 1;
            img {
              border: 1px solid @blue;
            }
          }
        }
      }
      .finishers { margin: 0 0 0 20px;}
    }
  }
  .carousel {
    width: 100%; min-height: 200px;
  }
  .files {
    list-style: none;
    li {display: inline-block;}
  }
  .tag > .edit-tags {
    color: @blue;
    text-decoration: none;
    border-bottom: 0px;
  }
}

.comment-box{
  ul { list-style: none;}
  margin: 15px 0 0 0;
  padding:15px;
  border-bottom: 1px @blue solid;
  #create-comment-form{
    .control-group{
      img{
        float:left;
      }
      .controls{
        margin-left:50px;
        textarea{
          margin-right: 20px;
          width: 420px;
          height: 24px;
        }
      }
    }
  }
  .comment-item{
    padding: 10px 0;
    position:relative;
    .comment-tools{
      position: absolute;
      right: 250px;
      top: 8px;
      visibility: hidden;
      margin:0 20px;
      a{
        line-height: 20px;
        color: @grey;
        font-size: 12px;
        margin: 0 0 0 5px;
      }
    }
    &:hover{
      .comment-tools{
        visibility:visible;
      }
    }
    .span1{
      width: 40px;
    }
    .span7{
      width: 510px;
      margin:0 0 0 10px;
      border-bottom: 1px @grey dashed;
      .author{
        margin: 0px;
        font-size: 12px;
        span{
          color: @grey;
        }
      }
    }
  }
}

// activity panel
.activity-panel {
  position: relative;
  padding-bottom: 35px;
  height: 100%;
  .activity-list {
    height: 100%;
    overflow-y: auto;
  }
}
.member, .project{
  &.online {

  }
  &.offline {
    opacity: 0.8;
  }
  cursor: pointer;
  &:hover, &.active {
    background-color: @grey;
  }
  overflow-y: auto;
  color: @black;
  margin: 5px 10px 0px 10px;
  background-color: @white;
  border-top: 1px solid @grey;
  .author-info {
    .avatar {float:left; margin: 10px;}
  }
  .navbar {
    margin-bottom: 5px;
    .navbar-inner {
      min-height:30px;
      margin: 0;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;
    }
    .nav-collapse > .nav > li {
      > a {
        padding: 5px 6px;
      }
    }
  }
  .audit-trail-container {
    padding: 5px;
    ul{list-style: none;}
  }
}

#existing-members, #waiting-members {
  list-style: none;
  li {
    float: left;
    margin: 5px;
    cursor: pointer;

    background-color: #ffffff;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;

    &:hover {
      border-color: rgba(82, 168, 236, 0.8);
      outline: 0;
      outline: thin dotted \9;
    /* IE6-9 */

      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
  }
}

// chart panel

.charts {
  position: relative;
  top: -70px;
  overflow-y: scroll;
  height: 100%;
  ul {
    list-style: none;
    li {
      -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
              border-radius: 5px;
    }
  }
}

.chart-header {
  text-align: center;
  background-color: @black;
  color: @white;
  -webkit-border-top-left-radius: 5px;
     -moz-border-top-left-radius: 5px;
          border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
     -moz-border-top-right-radius: 5px;
          border-top-right-radius: 5px;
}

// misc
.popover.editable-popover .popover-inner {
  .editable-owners {
    width: 450px;
  }
}

.accounts-dialog {
  padding: 25px 30px;
}